<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="查看详情"
    width="1200"
    draggable
    @close="close"
  >
    <el-table :data="tableData" border height="500">
      <el-table-column prop="name" label="图片" width="70">
        <template #default="{ row }">
          <img :src="row.goods_sku?.attr_img" />
        </template>
      </el-table-column>
      <el-table-column prop="sku_text" label="SKU/中文名" width="200">
        <template #default="{ row }">
          <div>SKU：{{ row.sku_text?.sku }}</div>
          <div>中文名：{{ row.sku_text?.sku_cn_title }}</div>
        </template>
      </el-table-column>
      <template v-if="type == 2">
        <el-table-column prop="supplier_name" label="供应商" width="200">
          <template #default="{ row }">
            <dataAuthority
              auth="supplier_name"
              :value="row.supplier_text?.supplier_name"
              :default_value="row.supplier_text?.supplier_code"
            ></dataAuthority>
            <div>供应商id：{{ row.supplier_text?.supplier_code }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="is_default_supplier" label="是否默认供应商" width="130">
          <template #default="{ row }">
            {{ row.supplier_text?.is_default_supplier_text }}
          </template>
        </el-table-column>
        <el-table-column prop="is_default_supplier" label="是否新增供应商" width="130">
          <template #default="{ row }">
            {{ row.supplier_text?.is_create_supplier }}
          </template>
        </el-table-column>
        <el-table-column prop="is_default_supplier" label="是否退税" width="90">
          <template #default="{ row }">
            {{ row.supplier_text?.is_refund_tax_text }}
          </template>
        </el-table-column>
        <el-table-column prop="cn_name" label="报关中文名" width="100">
          <template #default="{ row }">
            {{ row.custom_text?.cn_name }}
          </template>
        </el-table-column>
        <el-table-column prop="declare_unit" label="报关单位" width="90">
          <template #default="{ row }">{{ row.custom_text?.declare_unit }}</template>
        </el-table-column>
        <el-table-column prop="customs_quantity" label="规格数量" width="90">
          <template #default="{ row }">{{ row.custom_text?.customs_quantity }}</template>
        </el-table-column>
        <el-table-column prop="tax_rebate_rate" label="退税率" width="90">
          <template #default="{ row }">{{ row.custom_text?.tax_rebate_rate }}</template>
        </el-table-column>
        <el-table-column prop="customs_code" label="海关编码" width="90">
          <template #default="{ row }">{{ row.custom_text?.customs_code }}</template>
        </el-table-column>
        <el-table-column prop="declare_elements" label="申报要素" width="100">
          <template #default="{ row }">{{ row.custom_text?.declare_elements }}</template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column prop="declare_elements" label="产品状态" minWidth="100">
          <template #default="{ row }">{{ row.sku_text?.product_status_text }}</template>
        </el-table-column>
        <el-table-column prop="declare_elements" label="销售状态" minWidth="100">
          <template #default="{ row }">{{ row.sku_text?.sales_status_text }}</template>
        </el-table-column>
        <el-table-column prop="declare_elements" label="货源状态" minWidth="100">
          <template #default="{ row }">{{ row.sku_text?.supply_status_text }}</template>
        </el-table-column>
        <el-table-column prop="declare_elements" label="产品等级" minWidth="100">
          <template #default="{ row }">{{ row.sku_text?.product_level_text }}</template>
        </el-table-column>
        <el-table-column prop="declare_elements" label="智能清洁产品标签" width="140">
          <template #default="{ row }">{{
            row.sku_text?.clean_product_status_text
          }}</template>
        </el-table-column>
      </template>

      <el-table-column prop="sku_text" label="SKU相关人员" width="200">
        <template #default="{ row }">
          <div>开发：{{ row.sku_text?.developer_text }}</div>
          <div>采购：{{ row.sku_text?.purchaser_text }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="100">
        <template #default="{ row }"></template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ChangeDetail">
import { reactive, toRefs, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
const emits = defineEmits(["query"]);

const data = reactive({
  tableData: [],
  type: "",
  visible: false,
  load: false,
});
const { tableData, visible, load, type } = toRefs(data);
const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  tableData.value = data.goods_change_order_detail || [];
  type.value = data.change_type;
  visible.value = true;
};

onMounted(() => {});
const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
